<template>
  <view class="goodsContainer">
    <view class="goodsTitle">
      <view class="text">商品列表</view>
      <fui-icon name="close" @click="closePopup" size='40'></fui-icon>
    </view>
    <view class="goods-view" v-if="!listData.length">
      <fui-empty :isFixed="true" src="/static/images/empty/data.png" title="暂无商品数据" size="24" color="#999"></fui-empty>
    </view>
    <scroll-view scroll-y class="goods-view" v-else @scroll="onScroll">
      <view class="goods-list" v-for="item in listData" :key="item.id">
        <image :src="item.image" style="width: 164rpx; height: 164rpx; border-radius: 16rpx; overflow: hidden;" mode=""></image>
        <view class="goods-list-right">
          <view class="right-title">{{item.name}}</view>
          <view class="right-list">
            <view class="right-text">
              <image src="/static/images/icon-kc.png" style="width: 22rpx; height: 22rpx;"></image>
              库存 <span class="right-number">{{item.stock}}</span><span>{{item.unit}}</span>
            </view>
            <view class="right-text">
              <image src="/static/images/iocn-dj.png" style="width: 26rpx; height: 26rpx;"></image>
              单价 <span class="right-number">{{utils.moneyFormatter(item.qgjg / 100)}} </span><span>元/{{item.unit}}</span>
            </view>
            <view class="right-text" style="width: 100%;">
              <image src="/static/images/icon-qssl.png" style="width: 24rpx; height: 22rpx;"></image>
              起售数量 <span class="right-number">{{item.qgsl}}</span><span>{{item.unit}}</span>
            </view>
          </view>
        </view>
      </view>
      <fui-loadmore :state="moreState"></fui-loadmore>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue'
import goodsApi from '@/api/goods'
import utils from '@/components/firstui/fui-utils'

const tab = inject('$tab')
const modal = inject('$modal')

const emits = defineEmits(['closeGoodsPop'])
const props = defineProps({
  companyId: String | Number
})

// 获取商品列表
const moreState = ref(1)
const queryParams = ref({})
const listData = ref([])
const getGoodsList = () => {
  try {
    moreState.value = 2
    queryParams.value.companyId = props.companyId
    modal.loading('加载中...')
    goodsApi.getSupplierGoodsList(queryParams.value).then((res) => {
      modal.closeLoading()

      if (res.code === 0) {
        const newData = res.data.list.map(item => {
          return {
            ...item,
            image: item.sliderPicUrls[0]
          }
        })
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (e) {
    modal.closeLoading()
  }
}

const openPopup = () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10
  }
  getGoodsList()
}

const closePopup = () => {
  emits('closeGoodsPop')
}

const onScroll = (event) => {
  const scrollTop = event.detail.scrollTop
  const scrollHeight = event.detail.scrollHeight
  const delta = 500

  // 判断是否到达底部
  if (scrollTop + delta >= scrollHeight) {
    if (moreState.value == 1) {
      queryParams.value.pageNo++
      getGoodsList()
    }
  }
}

defineExpose({
  openPopup
})
</script>

<style lang="scss">
.goodsContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  padding: 32rpx 40rpx;
  box-sizing: border-box;
  font-family: PingFang SC, PingFang SC;
  color: #333333;
  background-color: #f8f8f8;
  border-radius: 24rpx 24rpx 0 0;

  .goodsTitle {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
  }

  .goods-view {
    height: calc(100% - 80rpx);
    overflow-y: auto;
  }

  .goods-list {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    display: flex;

    .goods-list-right {
      margin-left: 24rpx;
      width: calc(100% - 188rpx);

      .right-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 16rpx;
      }

      .right-list {
        display: flex;
        flex-wrap: wrap;

        .right-text {
          flex: 0 0 100%;
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          image {
            padding-right: 10rpx;
          }

          span {
            color: #333333;
          }

          .right-number {
            font-weight: bold;
            color: var(--fui-color-link);
            padding: 0 10rpx;
          }
        }
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条本身 */
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>